<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>灯泡</title>
    <style type="text/css">
        .red {
            color: red;
        }
    </style>
    <script src="./../lib/jquery-3.7.0.js"></script>
    <script type="text/javascript">
        let status = false;

        function color() {
            let images = $("#bulbColor");
            let text = $("#title_1");
            if (status === false) {
                images.attr("src", "./../asset/images/redbulb.png")
                text.html("灯亮了！");
                text.attr("style", "color:red");
                status = true;
                //text.css("color", "blue");    /* 通过直接修改CSS属性，而不是通过style方式绕一圈 */
                text.addClass("red");         /* 在CSS上添加一个class，通过JQuery为元素添加css样式表 */
            } else {
                images.attr("src", "./../asset/images/blackbulb.png")
                text.html("灯灭了！");
                text.attr("style", "color:black");
                status = false;
                //text.css("color", "black");
                text.removeClass("red");
            }
        }

    </script>
</head>
<body>
<div onclick="color()" style="text-align: center">
    <img src="./../asset/images/blackbulb.png" alt="blackBulb" id="bulbColor">
    <h1 id="title_1">灯灭了！</h1>
</div>
</body>
</html>